import React, { Component } from 'react'
import './index.scss'
import View from './../view/view'
import Gesture from './../gesture/index'
import ReactDOM from 'react-dom'

// point: change scrollLeft
export default class ScrollBar extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isShowItemX: false, // 是否显示X轴滚动条
      isShowItemY: false, // 是否显示Y轴滚动条
      rootNode: null, // 根元素
      tbaScrollBarUl: null, // 内容元素

      tbaScrollBarItem: null, // X滚动块
      tbaScrollBarUlScrollWidth: 0, // X内容的大宽度
      tbaScrollBarUlWidth: 0, // X滚动条的宽度
      proportionX: 0, // X比例
      tbaScrollBarItemWidth: 0, // X滚动块的宽度
      tbaScrollBarItemLeftMax: 0, // X滚动块滚动的最大距离
      tbaScrollBarUlScrollLeftMax: 0, // X内容能滚动到的最大距离
      itemScreenX: 0, // 点击X滚动块瞬间的X坐标
      tbaScrollBarItemLeft: 0, // 点击X滚动块瞬间滚动块的X Left
      tbaScrollBarUlOffsetLeft: 0, // 点击X滚动块瞬间内容的X ScrollLeft
      screenXDistance: 0, // 鼠标移动的坐标距离点下的瞬间X轴移动多远
      nextScreenX: 0, // X滚动块随着鼠标移动应该set的X
      tbaScrollBarUlOffsetLeftDistance: 0, // 内容应该移动的距离X

      tbaScrollBarItemY: null, // Y滚动块
      tbaScrollBarUlScrollHeight: 0, // Y内容的大高度
      tbaScrollBarUlHeight: 0, // Y滚动条的高度
      proportionY: 0, // Y比例
      tbaScrollBarItemHeight: 0, // Y滚动块的高度
      tbaScrollBarItemTopMax: 0, // Y滚动块滚动的最大距离
      tbaScrollBarUlScrollTopMax: 0, // Y内容能滚动到的最大距离
      itemScreenY: 0, // 点击Y滚动块瞬间的Y坐标
      tbaScrollBarItemTop: 0, // 点击Y滚动块瞬间滚动块的Y Top
      tbaScrollBarUlOffsetTop: 0, // 点击Y滚动块瞬间内容的Y ScrollTop
      screenYDistance: 0, // 鼠标移动的坐标距离点下的瞬间Y轴移动多远
      nextScreenY: 0, // Y滚动块随着鼠标移动应该set的Y
      tbaScrollBarUlOffsetTopDistance: 0 // 内容应该移动的距离Y

    }
  }
  componentDidMount () {
    if (this.props.children) {
      this.rootNode = ReactDOM.findDOMNode(this)
      this.tbaScrollBarUl = this.rootNode.firstChild
      
      const getXInfo = () => {
        this.tbaScrollBarItem = this.rootNode.querySelector('.tbaScrollBarItem')
        this.tbaScrollBarUlScrollWidth = this.tbaScrollBarUl.scrollWidth
        this.tbaScrollBarUlWidth = this.tbaScrollBarUl.offsetWidth
        this.rootNode.style.width = this.tbaScrollBarUlWidth + 'px'
      }
      const getYInfo = () => {
        this.tbaScrollBarItemY = this.rootNode.querySelector('.tbaScrollBarItemY')
        this.tbaScrollBarUlScrollHeight = this.tbaScrollBarUl.scrollHeight
        this.tbaScrollBarUlHeight = this.tbaScrollBarUl.offsetHeight
      }
      const setXBarWidth = () => {
        if (this.tbaScrollBarUlScrollWidth !== this.tbaScrollBarUlWidth) { // X轴溢出
          this.state.isShowItemX = true
          this.proportionX = this.tbaScrollBarUlWidth / this.tbaScrollBarUlScrollWidth // 比例
          this.tbaScrollBarItemWidth = this.proportionX * this.tbaScrollBarUlWidth // 滚动块宽度
          this.tbaScrollBarItemLeftMax = this.tbaScrollBarUlWidth - this.tbaScrollBarItemWidth // 滚动块最大滚动距离
          this.tbaScrollBarUlScrollLeftMax = this.tbaScrollBarUlScrollWidth - this.tbaScrollBarUlWidth // 内容最大滚动距离
          this.tbaScrollBarItem.style.width = this.tbaScrollBarItemWidth + 'px'
          this.setState({})
        }
      }
      const setYbarHeight = () => {
        if (this.tbaScrollBarUlScrollHeight !== this.tbaScrollBarUlHeight) {
          this.state.isShowItemY = true
          this.proportionY = this.tbaScrollBarUlHeight / this.tbaScrollBarUlScrollHeight
          this.tbaScrollBarItemHeight = this.proportionY * this.tbaScrollBarUlHeight
          this.tbaScrollBarItemTopMax = this.tbaScrollBarUlHeight - this.tbaScrollBarItemHeight
          this.tbaScrollBarUlScrollTopMax = this.tbaScrollBarUlScrollHeight - this.tbaScrollBarUlHeight
          this.tbaScrollBarItemY.style.height = this.tbaScrollBarItemHeight + 'px'
          this.setState({})
        }
      }
      getXInfo()
      getYInfo()
      setXBarWidth()
      setYbarHeight()
    }
  }
  onMouseDownItemX (start) {
    this.itemScreenX = start.X
    this.tbaScrollBarItemLeft = this.tbaScrollBarItem.offsetLeft
    this.tbaScrollBarUlOffsetLeft = this.tbaScrollBarUl.scrollLeft
  }
  onMouseDownItemY (start) {
    this.itemScreenY = start.X
    this.tbaScrollBarItemTop = this.tbaScrollBarItemY.offsetTop
    this.tbaScrollBarUlOffsetTop = this.tbaScrollBarUl.scrollTop
  }
  documentMouseMoveX (start, move, distan) { // 移动逻辑：记录按下瞬间的鼠标和内容坐标，移动的时候算出鼠标距离按下的时候移动多远，内容也距离按下的时候移动多远
    this.nextScreenX = this.tbaScrollBarItemLeft + distan.X
    const setXBarOffset = () => {
      if (this.nextScreenX < 0) {
        this.tbaScrollBarItem.style.left = '0px'
        this.tbaScrollBarUl.scrollLeft = 0
      } else if (this.nextScreenX > this.tbaScrollBarItemLeftMax) {
        this.tbaScrollBarItem.style.left = this.tbaScrollBarItemLeftMax + 'px'
        this.tbaScrollBarUl.scrollLeft = this.tbaScrollBarUlScrollLeftMax
      } else {
        this.tbaScrollBarItem.style.left = this.nextScreenX + 'px'
        this.tbaScrollBarUlOffsetLeftDistance = distan.X / this.proportionX
        this.tbaScrollBarUl.scrollLeft = this.tbaScrollBarUlOffsetLeft + this.tbaScrollBarUlOffsetLeftDistance
      }
    }
    setXBarOffset()
  }
  documentMouseMoveY (start, move, distan) {
    this.nextScreenY = this.tbaScrollBarItemTop + distan.Y
    const setYBarOffset = () => {
      if (this.nextScreenY < 0) {
        this.tbaScrollBarItemY.style.top = '0px'
        this.tbaScrollBarUl.scrollTop = 0
      } else if (this.nextScreenY > this.tbaScrollBarItemTopMax) {
        this.tbaScrollBarItemY.style.top = this.tbaScrollBarItemTopMax + 'px'
        this.tbaScrollBarUl.scrollTop = this.tbaScrollBarUlScrollTopMax
      } else {
        this.tbaScrollBarItemY.style.top = this.nextScreenY + 'px'
        this.tbaScrollBarUlOffsetTopDistance = distan.Y / this.proportionY
        this.tbaScrollBarUl.scrollTop = this.tbaScrollBarUlOffsetTop + this.tbaScrollBarUlOffsetTopDistance
      }
    }
    setYBarOffset()
  }
  render () {
    return (
      <div className="tbaScrollBarRoot">
        {
          this.props.children
        }
        <View show={this.state.isShowItemX} name="fade-in">
          <div className="tbaScrollBarWrap">
            <Gesture
            onMousedown={this.onMouseDownItemX.bind(this)}
            onMousemove={this.documentMouseMoveX.bind(this)}>
            <div className="tbaScrollBarItem">
            </div>
            </Gesture>
          </div>
        </View>
        <View show={this.state.isShowItemY} name="fade-in">
          <div className="tbaScrollBarWrapY">
            <Gesture
            onMousedown={this.onMouseDownItemY.bind(this)}
            onMousemove={this.documentMouseMoveY.bind(this)}>
              <div className="tbaScrollBarItemY"></div>
            </Gesture>
          </div>
        </View>
      </div>
    )
  }
}